
    var tabPlug=(function($, window, document) {
    var scrollSetp = 500,
    operationWidth = 90,
    leftOperationWidth = 30,
    animatSpeed = 150,
    linkframe = function(url, value) {
    $("#menu-list a.active").removeClass("active");
    $("#menu-list a[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
    $("#page-content iframe.active").removeClass("active");
    $("#page-content .iframe-content[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
    $("#menu-all-ul li.active").removeClass("active");
    $("#menu-all-ul li[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
},
    move = function(selDom) {
    var nav = $("#menu-list");
    var releft = selDom.offset().left;
    var wwidth = parseInt($("#page-tab").width());
    var left = parseInt(nav.css("margin-left"));
    if (releft < 0 && releft <= wwidth) {
    nav.animate({
    "margin-left": (left - releft + leftOperationWidth) + "px"
},
    animatSpeed);
} else {
    if (releft + selDom.width() > wwidth - operationWidth) {
    nav.animate({
    "margin-left": (left - releft + wwidth - selDom.width() - operationWidth) + "px"
},
    animatSpeed);
}
}
},
    createmove = function() {
    var nav = $("#menu-list");
    var wwidth = parseInt($("#page-tab").width());
    var navwidth = parseInt(nav.width());
    if (wwidth - operationWidth < navwidth) {
    nav.animate({
    "margin-left": "-" + (navwidth - wwidth + operationWidth) + "px"
},
    animatSpeed)
}
},
    closemenu = function() {
    $(this.parentElement).animate({
    "width": "0",
    "padding": "0"
},
    0,
    function() {
    var jthis = $(this);
    if (jthis.hasClass("active")) {
    var linext = jthis.next();
    if (linext.length > 0) {
    linext.click();
    move(linext)
} else {
    var liprev = jthis.prev();
    if (liprev.length > 0) {
    liprev.click();
    move(liprev)
}
}
}
    //删除导航标签
    this.remove();
    //删除对应的iframe标签
    $("#page-content .iframe-content[data-url='" + jthis.data("url") + "'][data-value='" + jthis.data("value") + "']").remove()
    //删除右边快捷导航对应的标签
    $("#menu-all-ul [data-url='" + jthis.data("url")+"']").remove();
});
    event.stopPropagation();
},
    init = function() {
    $("#page-prev").bind("click",
    function() {
    var nav = $("#menu-list");
    var left = parseInt(nav.css("margin-left"));
    if (left !== 0) {
    nav.animate({
    "margin-left": (left + scrollSetp > 0 ? 0 : (left + scrollSetp)) + "px"
},
    animatSpeed);
}
});
    $("#page-next").bind("click",
    function() {
    var nav = $("#menu-list");
    var left = parseInt(nav.css("margin-left"));
    var wwidth = parseInt($("#page-tab").width());
    var navwidth = parseInt(nav.width());
    var allshowleft = -(navwidth - wwidth + operationWidth);
    if (allshowleft !== left && navwidth > wwidth - operationWidth) {
    var temp = (left - scrollSetp);
    nav.animate({
    "margin-left": (temp < allshowleft ? allshowleft: temp) + "px"
},
    animatSpeed);
}
});
    $("#page-operation").bind("click",
    function() {
    var menuall = $("#menu-all");
    if (menuall.is(":visible")){
    menuall.hide();
} else {
    menuall.show();
}
});
    $("body").bind("mousedown",function(event) {
    if (! (event.target.id === "menu-all" || event.target.id === "menu-all-ul" || event.target.id === "page-operation" || event.target.id === "page-operation" || event.target.parentElement.id === "menu-all-ul")) {
    $("#menu-all").hide()
}
    event.stopPropagation();
})
};
    $.fn.tab = function(){
    init();
    this.bind("click",
    function(){
    var linkUrl = this.href;
    var linkHtml = this.text.trim();
    var selDom = $("#menu-list a[data-url='" + linkUrl + "'][data-value='" + linkHtml + "']");
    if (selDom.length === 0) {
    var iel = $("<i>", {
    "class": "menu-close"
}).bind("click", closemenu);
    $("<a>", {
    "html": linkHtml,
    "href": "javascript:void(0);",
    "data-url": linkUrl,
    "data-value": linkHtml
}).bind("click",
    function() {
    var jthis = $(this);
    linkframe(jthis.data("url"), jthis.data("value"))
}).append(iel).appendTo("#menu-list");
    $("<iframe>", {
    "class": "iframe-content",
    "data-url": linkUrl,
    "data-value": linkHtml,
    src: linkUrl
}).appendTo("#page-content");
    $("<li>", {
    "html": linkHtml,
    "data-url": linkUrl,
    "data-value": linkHtml
}).bind("click",
    function() {
    var jthis = $(this);
    linkframe(jthis.data("url"), jthis.data("value"));
    move($("#menu-list a[data-url='" + linkUrl + "'][data-value='" + linkHtml + "']"));
    $("#menu-all").hide();
    event.stopPropagation();
}).appendTo("#menu-all-ul");
    createmove();
} else {
    move(selDom);
}
    linkframe(linkUrl, linkHtml);
    return false;
});
    return this;
}
    /***
     * 将内部函数作为返回值返回，形成闭包。
     * 在函数外部可以调用。
     * */
    return {
    closemenu:closemenu
    ,linkframe:linkframe
}
})(jQuery, window, document);
    /**
    * 右击事件
    * */
    //点击菜单后隐藏
    $('html').on('contextmenu', function (){return false;}).click(function(){
    $('.popup_menu').hide();
});
    //注册自己的右击事件，设置只有a标签才能触发右击事件
    $('html').on('contextmenu','a',function(e){
    var that= this;
    console.log("自定义右键菜单");
    console.log("kyoPopupMenu"+kyoPopupMenu);
    console.log("事件e是"+e);
    var popupmenu = kyoPopupMenu.initContextmenu(that);
    // l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
    // t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
    l = e.clientX;
    t = e.clientY;
    popupmenu.css({left: l,top: t}).show();
    // $(".contextmenu").css({
    //     "left": l,
    //     "top": t
    // }).show();
    console.log("l是"+l);
    console.log("t是"+t);
    //return false 组织浏览器默认的右键菜单事件
    return false;
});
    //生成右击事件菜单
    var kyoPopupMenu={};
    kyoPopupMenu = (function(){
    return {
    initContextmenu: function (obj) {
    //获取当前触发右键点击事件的table的ID
    //移除.popup_menu所有的子标签和文本
    $('.popup_menu').remove();
    var html='<div class="popup_menu">';
    html+='<ul class="contextmenu" style="list-style:none;margin:0;    padding:0;font-size:12px;">';
    html+='<li><a menu="updateTab">刷新</a></li>';
    html+='<li><a menu="closeTab">关闭</a></li>';
    html+='<li><a menu="closeOther">关闭其他</a></li>';
    html+='<li><a menu="closeAll">关闭所有</a></li>';
    html+='</ul>';
    html+='</div>';
    //javascript: 是一个伪协议
    //javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。
    //href="javascript:;"就是去掉a标签的默认行为，跟href="javascript:void(0)"是一样的
    //end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
    //相当于在把所有的a标签href设为javascript:;后回到 $(html)
    //appendTo('body'),在body标签的结尾插入html,appendTo()的返回值时容器本身
    var popupMenuApp = $(html).find('a').attr('href','javascript:;').end().appendTo('body');
    //绑定事件
    $('.popup_menu a[menu="updateTab"]').on('click', function (){
    //刷新当前的
    tabPlug.linkframe($(obj).attr('data-url'),$(obj).attr('data-value'));
});
    $('.popup_menu a[menu="closeTab"]').on('click', function (){
    //关闭当前选中的
    tabPlug.closemenu.call($(obj).find('.menu-close')[0]);
    $('.popup_menu').hide();
});
    $('.popup_menu a[menu="closeOther"]').on('click', function (){
    //关闭除了选中的其他tab
    $.each($(obj).siblings(), function() {
    tabPlug.closemenu.call($(this).find('.menu-close')[0]);
});
    $('.popup_menu').hide();
});
    $('.popup_menu a[menu="closeAll"]').on('click', function (){
    $('#menu-list a').each(function(){
    //关闭所有，除了首页
    tabPlug.closemenu.call($(this).find('.menu-close')[0]);
});
    $('.popup_menu').hide();
});
    return popupMenuApp.find(".contextmenu");
}
}})();

